<template>
  <view class="layout newDetail">
    <scroll-view scroll-y @scrolltolower="onLoadMoreComment">
      <view class="header">
        <view class="title" v-text="info.title"></view>
        <view class="extra">
          <view class="time" v-if="info.time">{{ info.time | dateFormat("MM-DD HH:mm") }}</view>
          <view class="text-orange">
            <text class="cuIcon-attentionfill margin-lr-xs"></text>
            {{ info.hits }}
            <text class="cuIcon-messagefill margin-lr-xs"></text>
            {{ info.comment }}
          </view>
        </view>
      </view>
      <rich-text class="content" v-if="info.content" :nodes="info.content"></rich-text>
      <view class="comments">
        <view class="cu-bar solid-bottom">
          <view class="action sub-title">
            <text class="text-xl text-bold text-blue">精彩评论</text>
            <text class="text-ABC text-blue">COMMENT</text>
          </view>
        </view>
        <view class="comment">
          <template v-if="comments.length > 0">
            <view class="comment-item"  v-for="(item, index) in comments" :key="index">
              <view class="comment-avatar"><cu-avatar :img="item.avatar"></cu-avatar></view>
              <view class="comment-info solid-bottom">
                <view class="comment-userinfo">
                  <view class="uname">{{ item.uname }}</view>
                  <view class="extra">第{{ index + 1 }}楼 | {{ item.time | dateDiff }}</view>
                </view>
                <view class="comment-content" v-text="item.content"></view>
                <!-- 评论回复 -->
                <view class="comment-response" v-if="item.child">
                  <view class="response-item" v-for="(item2,index2) in item.child" :key="index2">
                    <text class="nickname">{{ item2.uname }}: </text>
                    {{ item2.pname ? "回复 " + item2.pname + ":": ''}}{{ item2.content }}
                  </view>
                   <view class="response-total" v-if="item.childTotal > 2">查看全部{{ item.childTotal }}条评论 > </view>
                </view>
              </view>
            </view>
          </template>
          
          <view class="comment-none" v-else>
              <image src="/static/images/news/none.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="cu-bar foot input" :style="[{ bottom: InputBottom + 'px' }]">
      <input
        class="bg-gray padding-sm"
        placeholder="给你一个神评的机会"
        v-model="message"
        :adjust-position="false"
        :focus="false"
        maxlength="300"
        cursor-spacing="10"
        @focus="InputFocus"
        @blur="InputBlur"
      />
      <button @tap="onClickComment" class="cu-btn bg-orange round shadow">评论</button>
    </view>
  </view>
</template>
<script>
let id,
  page = 1,
  size = 10;
import baseMixins from "@/utils/mixins";
import cuAvatar from "@/components/cuAvatar";
import uniApp from "@/utils/uni-app";
export default {
  mixins: [baseMixins],
  components: {
    cuAvatar
  },
  data() {
    return {
      info: {},
      comments: [],
      total: 0,
      InputBottom: 0,
      message: ""
    };
  },
  onLoad(options) {
    id = options.id;
    page = 1;
    if (!id) {
      uni.navigateTo({
        url: "/pages/common/home/index"
      });
    }
    this.init();
  },
  methods: {
    init() {
      let p1 = this.$api.news.detail(id);
      let p2 = this.$api.news.getComments(id, page, size);
      return this.$api.fly.all([p1, p2]).then(_ => {
        this.info = _[0].data.data;
        this.comments = [...this.comments, ..._[1].data.data.list];
        this.total = _[1].data.data.total;
        return _;
      });
    },
    InputFocus(e) {
      this.InputBottom = e.detail.height;
    },
    InputBlur(e) {
      this.InputBottom = 0;
    },
    onClickComment() {
      this.$api.news
        .postComment(id, this.message)
        .then(_ => {
          uniApp.toast("评论成功");
          this.comments.push({
            id: _.data.data.id,
            avatar: this.$store.state.user.userInfo.avatar,
            uname: this.$store.state.user.userInfo.nickName || this.$store.state.user.userInfo.mobile,
            content: this.message,
            time: new Date().getTime() / 1000
          });
          this.message = "";
        })
        .catch(e => {
          uniApp.alert(e.data.msg || "评论失败");
        });
    },
    onLoadMoreComment() {
      if (this.comments.length >= this.total) return false;
      uni.showNavigationBarLoading();
      page++;
      this.init().then(_ => {
        uni.hideNavigationBarLoading();
      });
    }
  },
  onPullDownRefresh() {
    page = 1;
    this.comments = [];
    this.init().then(_ => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>
<style lang="scss" scoped>
.newDetail {
  height: 100%;
  width: 100%;
  scroll-view {
    height: calc(100% - 100upx);
  }
  .header {
    padding: 10upx 20upx;
    background-color: #ffffff;
    .title {
      font-size: 36upx;
    }
    .extra {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .time {
        color: #a2a9b5;
        margin-right: 20upx;
      }
    }
  }
  rich-text.content {
    background: #ffffff;
    display: block;
    padding: 10upx 20upx;
    margin:0 auto;
  }
  .comments {
    margin-top: 20upx;
    background-color: #ffffff;
    .comment {
      padding: 0 20upx;
      &-item {
        margin: 20upx 0;
        display: flex;
        align-items: flex-start;
      }
      &-none{
        padding: 20upx 0;
        width: 100%;
        text-align: center;
        image{
          width: 287upx;
          height: 293upx;
          margin: 0 auto;
        }
      }
      .comment-avatar {
        width: 100upx;
      }
      .comment-info {
        width: calc(100% - 100upx);
        .uname {
          font-size: 28upx;
        }
        .extra {
          font-size: 22upx;
          color: #9aa2af;
        }
        .comment-content {
          font-size: 24upx;
          padding: 20upx 0;
        }
        .comment-response{
          background-color: #f3f3f3;
          font-size: 24upx;
          padding: 15upx;
          .response-item{
            .nickname{
              color: #599fcd;
              display: inline-block;
              padding-right: 5upx;
            }
          }
          .response-total{
            color: #9aa2af;
          }
        }
      }
    }
  }
  .foot {
    input {
      height: 64upx;
      line-height: 64upx;
      border-radius: 64upx;
      padding: 0 30upx; // app中必须加入该属性，否则错位
    }
  }
}
</style>
